<template>
	<view>
		<u-navbar title="登录" :autoBack="true" :placeholder="true" bgColor="none"></u-navbar>
		<image class="logo" src="@/static/images/logo.png" mode="aspectFit" />
		<view class="login">
			<view class="form">
				<view class="mt-160">
					<u-button 
						type="primary"
						size="large"
						v-if="isSelected"
						open-type="getPhoneNumber"
						@getphonenumber="decryptPhoneNumber"
						:customStyle="{fontSize:'32rpx',color:'#000'}"
					>
						手机号一键登录
					</u-button>
					<u-button
						type="primary"
						size="large"
						v-else
						@click="onTrembling"
						:customStyle="{fontSize:'32rpx',color:'#000'}"
					>
						手机号一键登录
					</u-button>
				</view>
				<view class="protocol" :class="animation">
					<uni-icons
						custom-prefix="iconfont" 
						:type="isSelected?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong'"
						:color="isSelected?'#EDAC2F':'#999'"
						size="16"
						@click="onSel"
					/>
					<text class="ml-10">我已阅读并且同意</text>
					<navigator class="line-yellow" open-type="navigate" url="/pages/article/agreement?type=user" hover-class="none">《用户服务协议》</navigator>
					<navigator class="line-yellow" open-type="navigate" url="/pages/article/agreement?type=privacy" hover-class="none">《隐私政策》</navigator>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import { mapMutations, mapState } from 'vuex'
	export default {
		data () {
			return {
				isSelected: false,
				animation:"",
			}
		},
		onLoad() {
			
		},
		computed:{
			...mapState(['stock']),
		},
		methods: {
			...mapMutations(['SET_LOGIN']),
			onSel(){
				this.isSelected = !this.isSelected
			},
			onTrembling(){
				if(!this.isSelected){
					this.animation = "shake-animation"
					setTimeout( () => {
							this.animation = ""
					},2000);
				}
			},
			decryptPhoneNumber(event){
				let that = this
				if(event.detail.errMsg==="getPhoneNumber:ok"){
						uni.login({
							provider: 'weixin', //使用微信登录
							success: function(loginRes) {
								that.$api.OnLogin({
									iv: event.detail.iv,
									encryptedData: event.detail.encryptedData,
									code: loginRes.code,
									appid: uni.getAccountInfoSync().miniProgram.appId,
									storeId: that.stock.id
								}).then(res=>{
									that.$store.commit('SET_LOGIN',{
										isLogin: true,
										token:res.data.auth.token,
										userInfo:res.data.user,
										systemAppId: res.data.systemAppId,
										stock:res.data.store
									})
									uni.navigateBack()
								})
							}
						})
						
				}else{
					uni.showModal({
						title: '提示',
						content: '您已拒绝授权，请重新点击并授权!',
						showCancel: false
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.logo{
		display: block;
		width: 80%;
		margin: 0 auto;
	}
	.login{
		padding: 0 40rpx;
		.form{
			padding-top: 160rpx;
			.protocol{
				display: flex;
				align-items: center;
				margin-top: 140rpx;
				font-size: 24rpx;
			}
		}
	}
	@keyframes shake {
	  0% { transform: translateX(0); }
	  25% { transform: translateX(-4px); }
	  50% { transform: translateX(4px); }
	  75% { transform: translateX(-4px); }
	  100% { transform: translateX(4px); }
	}
	.shake-animation {
	  display: inline-block;
	  animation: shake 0.5s; /* 抖动的持续时间 */
	  animation-iteration-count: infinite; /* 动画重复次数 */
	}
</style>